<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<cpn1></cpn1>

  <cpn2></cpn2>
</div>
  <script src="../js/vue.js"></script>
<script>

  // 1 全局注册组件的语法糖

  //1  原来的写法
  const cpn1 = Vue.extend({
     template:`

     <div>
     <h2>我是标题1</h2>
     <p>我是内容1</p>
</div>

     `
  });

  Vue.component('cpn1',cpn1);

  //2 语法糖的写法
  Vue.component('cpn2',{
    template:`
     <div>
     <h2>我是标题2</h2>
     <p>我是内容2</p>
</div>`
  })



  const app = new Vue({
    el:'#app',
    data:{
      message:"message",

    },
    methods:{

    },
    //局部组件 的语法糖;类似
    component:{

    }

  })
</script>
</body>
</html>